<template>
  <!-- 培训管理页面 -->
  <div class="_pageContent">
    <dataFilter :data="filterData" url="/sign/list" @search="search" ref="dataFilterRef"></dataFilter>

    <!-- 添加操作区域 -->
    <div class="_operation_add">
      <div style="color: #999;">
        <!-- 图标和标题 -->
        <icon-list />
        报名列表
      </div>
      <div style="display: flex;flex-direction: row;gap: 10px;">
        <!-- 导出数据按钮 -->
        <a-button type="primary" status="warning" @click="exportData">导出数据</a-button>
      </div>
    </div>

    <!-- 报名列表表格 -->
    <a-table :data="data">
      <template #columns>
        <!-- 报名 ID 列 -->
        <a-table-column title="报名id" data-index="signId"></a-table-column>
        <!-- 活动名称列，居中对齐 -->
        <a-table-column title="活动名称" data-index="activityName" align="center"></a-table-column>
        <!-- 用户名称列，居中对齐 -->
        <a-table-column title="用户名称" data-index="signName" align="center"></a-table-column>
        <!-- 用户联系方式列，居中对齐 -->
        <a-table-column title="用户联系方式" data-index="signPhone" align="center"></a-table-column>

        <!-- 培训时间列，解析 JSON 数据显示日期 -->
        <a-table-column title="培训时间" align="center">
          <template #cell="{ record }">
            {{ JSON.parse(record.trainingInfo).date }}
          </template>
        </a-table-column>
        <!-- 培训地点列，解析 JSON 数据显示地址 -->
        <a-table-column title="地点" align="center">
          <template #cell="{ record }">
            {{ JSON.parse(record.trainingInfo).address }}
          </template>
        </a-table-column>
        <!-- 单位列，显示用户单位 -->
        <a-table-column title="单位" data-index="user.unit" align="center"></a-table-column>
      </template>
    </a-table>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import dataFilter from "../../components/dataFilter.vue";
import { getSignList, exportSign } from "../../../api/sign";
import { useRouter } from 'vue-router'; // 引入 Vue Router 的 useRouter 方法

// 定义引用变量
const dataFilterRef = ref(null); // 数据过滤组件的引用
const router = useRouter(); // 路由实例

const filterData = ref([
  {
    label: "活动名称", 
    propName: "activityName", 
    type: "input", 
    params: router.currentRoute.value.query.name 
  },
  {
    label: "用户姓名",
    propName: "signName",
    type: "input"
  },
  {
    label: "用户电话",
    propName: "signPhone",
    type: "input"
  },
  {
    label: "单位",
    propName: "unit",
    type: "input"
  }
]);

// 表格数据
const data = ref([]);

// 获取报名列表
function getList() {
  getSignList({}).then(res => {
    // 将返回的数据按报名 ID 降序排序
    data.value = res.data.sort((a, b) => b.signId - a.signId);
  });
}

// 表单数据
const form = ref({});

// 导出报名数据
function exportData() {
  // 调用导出 API，传入过滤参数
  exportSign(dataFilterRef.value.filterParams);
}

// 搜索功能
function search(res) {
  // 更新表格数据为搜索结果
  data.value = res.data;
}

// 组件挂载后获取报名列表
onMounted(() => {
  getList();
});
</script>
<style scoped>
._operation_wrapper {
  display: flex;
  gap: 10px;
}

._operation_edit {
  color: #4588ff;
  cursor: pointer;
}

._operation_delete {
  color: #ff6a36;
  cursor: pointer;
}

._operation_add {
  margin-bottom: 10px;

  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
</style>
